import React, { Component } from 'react';
import {mapState,mapDispatch } from '../../store/bindState';
import './Xiao.css'
class Xiao extends Component {
  constructor(props) {
      super(props)
      this.state = {
          hots:[]
      }
  }
  componentDidMount() {
    console.log(this);
      this.$axios([{
          url:'search/hot'
      }]).then(res=>{
          this.setState(state=>{
              return{
                  hots:res[0].result.hots
              }
          })
      })
  }
  changeInpt(e){
      console.log(e.target.dataset.name);
      this.props.changeInputItem(e.target.dataset.name)
  }
  render() {
      return (
          <div>
              <div className="hotSearch">
                  热门搜索
              </div>
              <div className="hotSpanB">
              {this.state.hots.map((item,index)=>{
                  return(
                      <span data-name={item.first} onClick={this.changeInpt.bind(this)} className="hotSpan" key={index}>{item.first}</span>
                  )
              })}
              </div>
          </div>
      );
  }
}


// mapState(PlaypPage, ['ispause', 'playing', 'Showmusic'], mapDispatchToProps)
function mapDispatchToProps(dispatch){
  return {
    changeInputItem(name){
      return {
        type:'changeInputItem',
        params:name
      }
    }
  }
}
export default mapDispatch(mapState(Xiao,['']),[{type:"changeInputItem",params:true}])
// export default mapState(Xiao,[''],mapDispatchToProps)